// import dark theme
@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;

:root {
  /* 主色调（品牌色） */
  --ep-color-primary: #52c41a;
  /* 主色（绿色系） */
  --ep-color-primary-light: #73d13d;
  /* 主色浅色调 */
  --ep-color-primary-dark: #389e0d;
  /* 主色深色调 */
  --ep-color-primary-hover: #67e034;
  /* 主色 hover 状态 */
  --ep-color-primary-active: #237804;
  /* 主色 active 状态 */

  /* 辅助色（功能色） */
  --ep-color-success: #52c41a;
  /* 成功色（复用主色） */
  --ep-color-warning: #faad14;
  /* 警告色（橙色） */
  --ep-color-danger: #ff4d4f;
  /* 危险/错误色（红色） */
  --ep-color-info: #1890ff;
  /* 信息色（蓝色） */

  /* 中性色（文本/背景） */
  --ep-color-regular: #606266;
  /* 常规文本色 */
  --ep-color-primary-text: #303133;
  /* 主要文本色（更深） */
  --ep-color-secondary-text: #909399;
  /* 次要文本色（较浅） */
  --ep-color-placeholder: #c0c4cc;
  /* 占位符文本色 */

  --ep-color-background: #ffffff;
  /* 页面背景色 */
  --ep-color-bg-light: #f5f7fa;
  /* 浅背景色（区块/卡片） */
  --ep-color-border: #e5e6eb;
  /* 边框色 */
  --ep-color-disabled: #f5f5f5;
  /* 禁用状态背景色 */
  --ep-color-disabled-text: #c9cdd4;
  /* 禁用状态文本色 */

  /* 字体 */
  --ep-font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  /* 全局字体 */
  --ep-font-size-xs: 12px;
  /* 超小字体 */
  --ep-font-size-sm: 14px;
  /* 小字体 */
  --ep-font-size-base: 16px;
  /* 基础字体 */
  --ep-font-size-lg: 18px;
  /* 大字体 */
  --ep-font-size-xl: 20px;
  /* 超大字体 */

  --ep-font-weight-normal: 400;
  /* 常规字重 */
  --ep-font-weight-medium: 500;
  /* 中等字重 */
  --ep-font-weight-bold: 700;
  /* 粗体字重 */

  /* 边框 */
  --ep-border-width: 1px;
  /* 边框宽度 */
  --ep-border-style: solid;
  /* 边框样式 */
  --ep-border-radius-sm: 2px;
  /* 小圆角 */
  --ep-border-radius-base: 4px;
  /* 基础圆角 */
  --ep-border-radius-lg: 8px;
  /* 大圆角 */
  --ep-border-radius-circle: 50%;
  /* 圆形圆角 */

  /* 间距 */
  --ep-spacing-xs: 4px;
  /* 超小间距 */
  --ep-spacing-sm: 8px;
  /* 小间距 */
  --ep-spacing-base: 16px;
  /* 基础间距 */
  --ep-spacing-lg: 24px;
  /* 大间距 */
  --ep-spacing-xl: 32px;
  /* 超大间距 */

  /* 阴影 */
  --ep-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  /* 小阴影 */
  --ep-shadow-base: 0 4px 16px rgba(0, 0, 0, 0.12);
  /* 基础阴影 */
  --ep-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
  /* 大阴影 */

  /* 过渡动画 */
  --ep-transition-duration: 0.3s;
  /* 过渡时长 */
  --ep-transition-timing-function: ease-in-out;
  /* 过渡曲线 */
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
  :root {
    --ep-color-primary: #73d13d;
    /* 暗黑模式主色更亮 */
    --ep-color-primary-text: #f5f5f5;
    /* 文本色反白 */
    --ep-color-secondary-text: #c0c4cc;
    --ep-color-background: #141414;
    /* 背景色深色 */
    --ep-color-bg-light: #1f1f1f;
    /* 区块背景深色 */
    --ep-color-border: #303030;
    /* 边框色加深 */
  }
}

body {
  font-family:
    Inter, system-ui, Avenir, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

a {
  color: var(--ep-color-primary);
}

code {
  border-radius: 2px;
  padding: 2px 4px;
  background-color: var(--ep-color-primary-light-9);
  color: var(--ep-color-primary);
}

#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: rgb(13, 148, 136);
  opacity: 0.75;
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}
